<template>
  <el-card class="container">
    <el-button type="primary" @click="showSaveUpdateTrademark()">
      添加品牌
    </el-button>
    <!--
      data 数据
      border 带边框
    -->
    <el-table v-loading="loading" :data="trademarkList" border class="table">
      <!--
        el-table-column 列
          prop 当前列要展示的数据名称
          label 列（表）头的名称
          width 列的宽度
       -->
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <!--
          通过作用域插槽获取当前遍历的数据
          scoped {
            row 当前行数据
            $index 下标
          }
         -->
        <template v-slot="{ row }">
          <img class="trademark-logo" :src="row.logoUrl" alt="row.tmName" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            @click="showSaveUpdateTrademark(true, row)"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="delTrademark(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      :title="`${isUpdateTrademark ? '修改' : '添加'}品牌`"
      :visible.sync="visible"
    >
      <!-- 默认插槽 body -->
      <!--
        ref="form" 获取组件的实例对象 通过组组件的实例对象调用上面的方法
        :model="form" 绑定当前表单的数据
        label-width 表单项宽度
       -->
      <el-form ref="form" :model="trademark" :rules="rules" label-width="100px">
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="trademark.tmName" />
        </el-form-item>
        <el-form-item label="品牌logo" prop="logoUrl">
          <!--
            action 上传地址
            :show-file-list  上传多张
            `${process.env.VUE_APP_API}/dev-api/admin/product/fileUpload `
            本能写死  未来会改测试环境  开发环境...
            上面的地址不是this上的东西
            模板页面只能找this上的内容  模板页面不能写非this上的内容

           -->
          <el-upload
            class="avatar-uploader"
            :action="`${baseURL}/admin/product/fileUpload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="trademark.logoUrl"
              :src="trademark.logoUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 命名插槽 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqGetTrademarkList,
  reqSaveTrademark,
  reqUpdateTrademark,
  reqRemoveTrademark
} from "@/api/product/trademark"

export default {
  name: "Trademark",
  data() {
    return {
      // 品牌列表
      trademarkList: [],
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 3,
      // 总数
      total: 0,
      // 动画效果
      loading: false,
      visible: false,
      trademark: {
        tmName: "",
        logoUrl: "",
      },
      // 表单验证规则的属性名必须和收集的数据名称一致
      rules: {
        tmName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        logoUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
      // 请求地址前缀
      baseURL: process.env.VUE_APP_BASE_API,
      // 定义标识  是否更新
      isUpdateTrademark: false,
    };
  },
  mounted() {
    this.getTrademarkList();
  },
  methods: {
    // 获取品牌分页列表
    async getTrademarkList() {
      this.loading = true;
      const res = await reqGetTrademarkList(this.currentPage, this.pageSize);
      this.trademarkList = res.data.records;
      this.total = res.data.total;
      this.$message({
        type: "success",
        message: "数据更新成功",
      });
      this.loading = false;
    },
    // 每页条数发生变化触发回调
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getTrademarkList();
    },
    // 当前页码变化触发回调
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getTrademarkList();
    },
    // 上传成功的回调
    handleAvatarSuccess(res) {
      // console.log(res,file);
      this.trademark.logoUrl = res.data;
      // 清空校验结果
      this.$refs.form.clearValidate(["logoUrl"]);
    },
    // 上传之前的回调---校验与限制
    beforeAvatarUpload(file) {
      const fileTypes = ["image/jpeg", "image/jpg", "image/png"];
      const isValidFileType = fileTypes.includes(file.type);
      const isValidFileSize = file.size / 1024 < 500;

      if (!isValidFileType) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isValidFileSize) {
        this.$message.error("上传头像图片大小不能超过 500KB!");
      }

      // 返回true 可以上传
      // 返回false 不能上传
      return isValidFileType && isValidFileSize;
    },
    // 提交表单
    submitForm() {
      // 提交时对表单校验---this.$refs 通过之前绑定的ref 获取到表单的实例对象
      // validate()---校验方法
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 通过
          const { tmName, logoUrl, id } = this.trademark;
          const { isUpdateTrademark } = this;

          if (this.isUpdateTrademark) {
            await reqUpdateTrademark({ tmName, logoUrl, id });
          } else {
            await reqSaveTrademark(tmName, logoUrl);
          }
          // 提示添加成功
          // this.$message,success('添加成功')
          this.$message({
            type: "success",
            message: `${isUpdateTrademark ? "修改" : "添加"}成功`,
          });
          // 更新添加内容
          this.getTrademarkList();
          // 隐藏对话框
          this.visible = false;
        }
      });
    },
    // 展示更新后的
    // showUpdateTrademark(row) {
    //   this.visible = true;
    //   this.trademark = row;
    //   this.isUpdateTrademark = true;
    //   // 表单隐藏后  清空添加、修改的验证信息
    //   this.$refs.form.clearValidate();
    // },
    // // 显示添加信息
    // showSaveTrademark() {
    //   this.visible = true;
    //   this.trademark = {
    //     tmName: "",
    //     logoUrl: "",
    //   };
    //   this.isUpdateTrademark = false;
    //   this.$refs.form.clearValidate();
    // },
    // 上面方法代码冗余 封装能为一个
    showSaveUpdateTrademark(
      isUpdateTrademark,
      trademark = {
        tmName: "",
        logoUrl: "",
      }
    ) {
      this.visible = true;
      // 这里操作的 不能是同一个对象  再拷贝一个
      // this.trademark = trademark
      this.trademark = { ...trademark };
      this.isUpdateTrademark = isUpdateTrademark;
      this.$refs.form.clearValidate();
    },
    delTrademark(row) {
      const that = this;
      async function successCb() {
        await reqRemoveTrademark(row.id);
        that.$message({
          type: "success",
          message: "删除成功!",
        });
        that.getTrademarkList();
      }
      this.$confirm(
        `是否删除<span class="warning-text">${row.tmName}</span>品牌？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true,
        }
      ).then(successCb);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 10px;
}
.table {
  margin: 10px 0;
}
.trademark-logo {
  width: 200px;
  height: 100px;
}
</style>
